<template>
  <div class="model-sty">
    <Modal v-model="returnPop" width="800" :mask-closable="false" class-name="vertical-center-modal">
      <div slot="header" class="pop-title">{{ $t('user.return_pop_title') }}</div>
      <div class="body-content">
        <div class="label-text">{{ $t('user.return_label') }}</div>
        <Select v-model="form.reason">
          <Option v-for="item in reasonList" :value="item.value" :key="item.value">{{ $t(item.label) }}</Option>
        </Select>
        <div class="label-text" v-if="form.reason == 4" style="margin-top: 16px;">{{ $t('user.edit_pop_title') }}：</div>
        <Input v-if="form.reason == 4" v-model="form.returnReason" maxlength="200" show-word-limit type="textarea"
          :rows="4" :placeholder="$t('user.desc_reason')" />
        <div class="tips-text">{{ $t('user.tips_desc') }}</div>
        <div class="amount-sty">
          {{ $t('user.purchase_goods_label') }}:&nbsp;
          <span class="amount-num">{{ userInfo.currencySymbol }} {{ feeInfo.itemAmount }}</span>
          <Tooltip placement="left" max-width="640" transfer>
            <Icon class="icon-sty" color="#AEB0B9" size="20" type="ios-help-circle-outline" />
            <div slot="content" class="fee-detail">
              <div>{{ $t('user.purchase_goods_label') }}: {{ userInfo.currencySymbol }}{{ feeInfo.itemAmount }}</div>
              <div> {{ $t('user.home_freight') }}: {{ userInfo.currencySymbol }}{{ feeInfo.logisticsFee }} ({{
                $t('user.tips_text') }})</div>
            </div>
          </Tooltip>
        </div>
        <div class="amount-sty" v-if="feeInfo.additionalServiceFee > 0">
          {{ $t('user.need_return_fee') }}:&nbsp;
          <span class="amount-num">{{ userInfo.currencySymbol }} {{ feeInfo.additionalServiceFee }}</span>
          <Tooltip placement="left" max-width="640" transfer>
            <Icon class="icon-sty" color="#AEB0B9" size="20" type="ios-help-circle-outline" />
            <div slot="content" class="fee-detail">
              <div>{{ $t('user.need_return_desc') }}</div>
            </div>
          </Tooltip>
        </div>
        <div class="amount-sty">
          {{ $t('user.return_amount_label') }}:&nbsp;
          <span class="amount-num">
            {{ userInfo.currencySymbol }} {{ pay_return_amount }}
          </span>
          <Tooltip placement="left" max-width="640" transfer>
            <Icon class="icon-sty" color="#AEB0B9" size="20" type="ios-help-circle-outline" />
            <div slot="content" class="fee-detail">
              <div>{{ $t('user.equation_text') }}</div>
              <div>{{ $t('user.product_size') }}：
                <span v-if="orderInfo.height && orderInfo.width">
                  {{ orderInfo.length }}
                  {{ orderInfo.length && (orderInfo.width || orderInfo.height) ? '*' : '' }}
                  {{ orderInfo.width }}
                  {{ orderInfo.width && (orderInfo.length || orderInfo.height) ? '*' : '' }}
                  {{ orderInfo.height }}
                </span>
              </div>
              <div> {{ $t('user.good_weight') }}: {{ orderInfo.weight }}g </div>
              <div>
                {{ $t('user.back_freight') }}：{{ userInfo.currencySymbol }}{{ feeInfo.expressFee }}（
                {{ $t('user.first_weight') }}1000g/{{ userInfo.currencySymbol }}{{ feeInfo.expressFeeHead }}，
                {{ $t('user.next_weight') }}1000g/{{ userInfo.currencySymbol }}{{ feeInfo.expressFeeContinue }}）
              </div>
              <div>{{ $t('user.operation_fee') }}：{{ userInfo.currencySymbol }}{{ feeInfo.serviceFee }}</div>
              <div>{{ $t('user.long_tips') }}</div>
            </div>
          </Tooltip>
        </div>
        <Checkbox v-model="form.agree" class="agree-check">{{ $t('user.return_agree') }}</Checkbox>
      </div>
      <div slot="footer" class="footer-sty">
        <div class="return-text">
          {{ $t("user.amount_of_refund") }}:&nbsp;
          <span class="amount-num">
            {{ userInfo.currencySymbol }} {{ feeInfo.diffFee }}
          </span>
          <Tooltip placement="left" max-width="640" transfer>
            <Icon class="icon-sty" color="#AEB0B9" size="20" type="ios-help-circle-outline" />
            <div slot="content" class="fee-detail">
              <div>{{ $t('user.return_computed') }}</div>
              <div>{{ $t('user.purchase_goods_label') }}：{{ userInfo.currencySymbol }} {{ feeInfo.itemAmount }}</div>
              <div v-if="feeInfo.additionalServiceFee > 0">
                {{ $t('user.need_return_fee') }}：{{ userInfo.currencySymbol }} {{ feeInfo.additionalServiceFee }}
              </div>
              <div>{{ $t('user.return_fee') }}: {{ userInfo.currencySymbol }} {{ feeInfo.diffFee }}</div>
            </div>
          </Tooltip>
        </div>
        <div class="cancel-btn" @click="cancelMet()">{{ $t('user.cancel') }}</div>
        <div class="confirm-btn" @click="confirmMet()">{{ $t('user.confirm') }}</div>
      </div>
    </Modal>
    <!-- 确认之后 -->
    <Modal v-model="successPop" width="800" :mask-closable="false" :closable="false" class-name="vertical-center-modal">
      <div slot="header" class="pop-title">{{ $t('user.returning_pop_title') }}</div>
      <div class="body-content">
        <div class="title1">{{ $t('user.success_title1') }}</div>
        <div class="title2">{{ $t('user.success_title2') }}</div>
        <div class="title2">{{ $t('user.success_title3_head') }}<strong>"{{ $t('header.userCenter') }} > {{
          $t('user.homePage') }} > {{ $t("user.balance") }}"</strong>{{ $t('user.success_title3_end') }}</div>
      </div>
      <div slot="footer" class="footer-sty">
        <div class="confirm-btn" @click="endMet()">{{ $t('user.confirm') }}</div>
      </div>
    </Modal>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { returnOrderEstimate, returnOrderApply } from "@/api/expressOrder";
import { bigPlus } from "@/common/digital-computation";
export default {
  props: ['orderNo', 'orderInfo'],
  data() {
    return {
      returnPop: false,
      successPop: false,
      form: {},
      reasonList: [
        {
          value: 1,
          label: "user.return_reason1",
        },
        {
          value: 2,
          label: "user.return_reason2",
        },
        {
          value: 3,
          label: "user.return_reason3",
        },
        {
          value: 4,
          label: "user.otherReasons",
        },
      ], // 取消理由
      feeInfo: {},
      cancelReason: '',
      pay_return_amount: ''
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    // 子单退货-费用
    getReturnFee(id) {
      returnOrderEstimate(id).then(res => {
        this.feeInfo = res.result;
        this.pay_return_amount = bigPlus(this.feeInfo.expressFee, this.feeInfo.serviceFee)
      })
    },
    // 取消
    cancelMet() {
      this.form = {};
      this.returnPop = false;
    },
    // 确认申请
    confirmMet() {
      // 取消订单
      if (this.form.reason != 4) {
        for (let i = 0; i < this.reasonList.length; i++) {
          if (this.reasonList[i].value == this.form.reason) {
            this.cancelReason = this.$t(this.reasonList[i].label);
          }
        }
      } else {
        if (!this.form.returnReason) {
          this.$Message.error(this.$t("public.returnPlease"));
          return;
        }
        this.cancelReason = this.form.returnReason
      }
      if (this.form.agree != undefined && this.form.agree != false && this.form.reason != undefined) {
        returnOrderApply({ orderItemId: this.orderNo, returnReason: this.cancelReason, agreement: this.form.agree }).then(res => {
          if (res.code == 200) {
            this.cancelMet();
            // diffFee < 0要补款,反之显示弹框
            if (res.result.status == 'UNPAYMENT') {
              this.$router.push(`/pay?id=${res.result.returnOrderNo}&markText=mend`);
            } else {
              this.successPop = true;
            }
          }
        })
      } else {
        if (this.form.agree == undefined || this.form.agree == false) {
          this.$Message.error(this.$t("pay.check"));
          return;
        }
        if (this.form.reason == undefined) {
          this.$Message.error(this.$t("submitParcel.pleaseSelect"));
          return;
        }
      }
    },
    // 成功确认关闭
    endMet() {
      this.successPop = false;
      this.$parent.getDataList();//取消退货后，刷新列表
    }
  }
}
</script>
<style lang="less" scoped>
:deep(.ivu-modal-header) {
  border: none;
  padding: 34px 32px;
}

:deep(.ivu-modal-body) {
  padding: 0 32px 32px 32px;
}

:deep(.ivu-modal-footer) {
  border-top: none;
  padding-bottom: 36px;
}

:deep(.ivu-select) {
  width: 344px;
  font-size: 16px;
}

:deep(.ivu-select-selection) {
  height: 42px;
}

:deep(.ivu-select-single .ivu-select-selection .ivu-select-placeholder, .ivu-select-single .ivu-select-selection .ivu-select-selected-value) {
  font-size: 15px;
  height: 44px;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal {
    top: 0;
  }
}

.pop-title {
  font-family: PingFang HK, PingFang HK;
  font-weight: 500;
  font-size: 24px;
  color: #1E1714;
  line-height: 28px;
}

.body-content {
  font-family: PingFang HK, PingFang HK;

  .title1 {
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    line-height: 21px;
    margin-bottom: 12px;
  }

  .title2 {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 21px;
    margin-bottom: 8px;
  }

  .label-text {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 16px;
    margin-bottom: 12px;
  }

  .tips-text {
    padding: 12px;
    font-weight: 500;
    font-size: 15px;
    color: #FF186B;
    line-height: 16px;
    background: #FFEEF4;
    margin-top: 18px;
    margin-bottom: 39px;
  }

  .amount-sty {
    font-weight: 400;
    font-size: 17px;
    color: #333333;
    line-height: 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;

    .fee-detail {
      white-space: normal;
    }

    .amount-num {
      font-weight: 500;
      font-size: 24px;
      color: #F21473;
      line-height: 27px;
    }

    .icon-sty {
      margin-left: 4px;
    }
  }

  .agree-check {
    float: right;
    font-weight: 400;
    font-size: 14px;
    color: #AEB0B9;
    line-height: 20px;
  }
}

.footer-sty {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 16px;
  margin-top: 8px;

  .return-text {
    font-weight: 400;
    font-size: 20px;
    color: #333333;
    line-height: 20px;

    .amount-num {
      font-weight: 500;
      font-size: 24px;
      color: #F21473;
      line-height: 27px;
    }

    .icon-sty {
      margin-left: 4px;
    }
  }

  .cancel-btn {
    font-family: PingFang HK, PingFang HK;
    padding: 11px 40px;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #E5E5E5;
    font-weight: 400;
    font-size: 16px;
    color: #1E1714;
    line-height: 19px;
    cursor: pointer;
  }

  .confirm-btn {
    font-family: PingFang HK, PingFang HK;
    padding: 11px 40px;
    background: #F21473;
    border-radius: 8px 8px 8px 8px;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 19px;
    cursor: pointer;
  }
}
</style>
